import 'package:flutter/material.dart';
import 'package:flutter_basic/pages/cart/cart_page.dart';
import 'package:flutter_basic/pages/cate/cate_page.dart';
import 'package:flutter_basic/pages/home/homepage.dart';
import 'package:flutter_basic/pages/user/user_page.dart';

class TabPage extends StatefulWidget {
  const TabPage({Key? key}) : super(key: key);

  @override
  _TabPageState createState() => _TabPageState();
}

class _TabPageState extends State<TabPage> {
  // 当前激活的索引
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: [Homepage(), CatePage(), CartPage(), UserPage()],
      ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.white,
        currentIndex: _currentIndex,
        // 点击事件
        onTap: (value) {
          setState(() {
            _currentIndex = value;
          });
        },
        // tab固定不动
        type: BottomNavigationBarType.fixed,
        // 未激活的字体大小
        unselectedFontSize: 12,
        // 未激活的颜色
        unselectedItemColor: Colors.black,
        // 已激活的字体大小
        selectedFontSize: 12,
        // 已激活的颜色
        selectedItemColor: Colors.red,
        items: [
          BottomNavigationBarItem(
            label: '首页',
            icon: Image.asset('assets/tabbar/home.png', width: 24, height: 24),
            activeIcon: Image.asset(
              'assets/tabbar/home-active.png',
              width: 24,
              height: 24,
            ),
          ),
          BottomNavigationBarItem(
            label: '分类',
            icon: Image.asset('assets/tabbar/cate.png', width: 24, height: 24),
            activeIcon: Image.asset(
              'assets/tabbar/cate-active.png',
              width: 24,
              height: 24,
            ),
          ),
          BottomNavigationBarItem(
            label: '购物车',
            icon: Image.asset('assets/tabbar/cart.png', width: 24, height: 24),
            activeIcon: Image.asset(
              'assets/tabbar/cart-active.png',
              width: 24,
              height: 24,
            ),
          ),
          BottomNavigationBarItem(
            label: '我的',
            icon: Image.asset('assets/tabbar/user.png', width: 24, height: 24),
            activeIcon: Image.asset(
              'assets/tabbar/user-active.png',
              width: 24,
              height: 24,
            ),
          ),
        ],
      ),
    );
  }
}
